import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router'
Vue.use(VueRouter)
const router = new VueRouter({
  routes
})
const HAS_LOGINED = false //是否已登录
router.beforeEach((to,form,next)=>{
  //如果访问的不是登录页面
  if(to.name!=='login'){
    // 如果已登录
    if(HAS_LOGINED) next()
    //如果未登录跳转到login
    else next({name:'login'})
  }else{
    //如果已登录但访问是login让其跳转到首页
    if(HAS_LOGINED) next({name:'home'})
    //如果为登录但访问是login
    else next()
  }
})
//全局路由后置钩子(一般用于添加或者关闭跳转时的动画)
router.afterEach((to,from)=>{
})


/**
 * 1.导航被触发
 * 2.在失活的组件(即将离开的页面组件)里调用离开守卫beforeRouteLeave
 * 3.调用全局的前置守卫beforeEach
 * 4.在重用的组件里调用(地址值改变但是页面里还存在当前组件)beforeRouteUpdate 
 * 5.调用路由独享的守卫beforeEnter
 * 6.解析异步路由组件
 * 7.在被激活的组件(即将进入的页面组件)里调用beforeRouteEnter
 * 8.调用全局的解析守卫 beforeResolve
 * 9.导航被确认
 * 10.调用全局的后置守卫 afterEach
 * 11.触发DOM渲染
 * 12.用创建好的实例调用beforeRouteEnter守卫里传给next回调函数
 * //路由元信息(meta)
 * 1.在路由守卫里通过to.meta.你定义的属性名  获取值
 * 2.在组件里通过this.$route.meta.你定义的属性名  获取值
 */ 
export default router
